<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<title></title>
		<meta name="description" content="overview & stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="static/css/bootstrap.min.css" />
		<link rel="stylesheet" href="static/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="static/css/font-awesome.min.css" />
		<!-- 下拉框 -->
		<link rel="stylesheet" href="static/css/chosen.css" />
		<link rel="stylesheet" href="static/css/ace.min.css" />
		<link rel="stylesheet" href="static/css/ace-responsive.min.css" />
		<link rel="stylesheet" href="static/css/ace-skins.min.css" />
		<style type="text/css">
		input, textarea, .uneditable-input {
		    width: 306px;
		}
		</style>
		<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
		<!--提示框-->
		<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<script type="text/javascript">
	$(top.hangge());
	
	//保存
	function save(){
		if($("#organname").val()=="" || $("#organname").val()=="此机构名称已存在!"){
			$("#organname").tips({
				side:3,
	            msg:'输入机构名称',
	            bg:'#AE81FF',
	            time:2
	        });
			
			$("#organname").focus();
			$("#organname").val('');
			$("#organname").css("background-color","white");
			return false;
		}
		
		if($("#abbrname").val()==""){
			$("#abbrname").tips({
				side:3,
	            msg:'输入机构简称',
	            bg:'#AE81FF',
	            time:3
	        });
			$("#abbrname").focus();
			return false;
		}
		
		var myreg = /^(((13[0-9]{1})|15[0-9]{1}|18[0-9]{1}|14[0-9]{1})+\d{8})$/;
		var myreg2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
		if($("#phonenumber").val()!=""){
			if( !(myreg.test($("#phonenumber").val()) || myreg2.test($("#phonenumber").val())) ){
				$("#phonenumber").tips({
					side:3,
		            msg:'电话号码格式不正确',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#phonenumber").focus();
				return false;
			}
		}
		
		if($("#email").val()!=""){
			if(!ismail($("#email").val())){
				$("#email").tips({
					side:3,
		            msg:'邮箱格式不正确',
		            bg:'#AE81FF',
		            time:3
		        });
				$("#email").focus();
				return false;
			}
		}
		
		if($("#selprovince").val()=="0"){
			$("#selprovince").tips({
				side:3,
	            msg:'请选择省份',
	            bg:'#AE81FF',
	            time:3
	        });
			return false;
		}
		
		if($("#selcity").val()=="0"){
			$("#selcity").tips({
				side:3,
	            msg:'请选择城市',
	            bg:'#AE81FF',
	            time:3
	        });
			return false;
		}
		
		if($("#selarea").val()=="0"){
			$("#selarea").tips({
				side:3,
	            msg:'请选择区域',
	            bg:'#AE81FF',
	            time:3
	        });
			return false;
		}
		hasOrganName();
	}
	
	function ismail(mail){
		return(new RegExp(/^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/).test(mail));
	}
	
	//判断机构名称是否存在
	function hasOrganName(){
		var organname = $("#organname").val();
		var url = "<%=basePath%>/organ/hasOrganName.do?organname="+organname+"&tm="+new Date().getTime();
		$.get(url,function(data){
			if(data=="error"){
				$("#organname").css("background-color","#D16E6C");
				setTimeout("$('#organname').val('此机构名称已存在!')",500);
				return false;
			}else{
				$("#organForm").submit();
				$("#centerOfMainFrame").hide();
				$("#centerOfMainFrame2").show();
				return true;
			}
		});
	}
	
	$(document).ready(function(){
		getProvince();
	});
	
	function getProvince() {
			$.ajax( {
				type :'post',
				url :'site/queryAllProvinceList.json',
				dataType :'json',
				success : function(result) {
					//alert(result.provinceList);
					$.each(result.provinceList, function(entryIndex, entry) {
						var html = "<option value='" + entry.provincecode + "'>"
								+ entry.provincename + "</option>";
						$("#selprovince").append(html);
					});
				}
			});
		}

		function getCity() {
			/* if (document.getElementById("citydiv").style.display == "block"
					|| document.getElementById("areadiv").style.display == "block") {
				document.getElementById("citydiv").style.display = "none";
				document.getElementById("areadiv").style.display = "none";
			}
			if (document.getElementById("citydiv").style.display == "none"
					&& document.getElementById("selprovince").value != 0) {
				document.getElementById("citydiv").style.display = "block";
			} */
			$("#selcity option[value!=0]").remove();
			$("#selarea option[value!=0]").remove();
			var object = $("#selprovince");
			if (object.val() != 0) {
				$.ajax( {
					type :'post',
					url :'site/queryAllCityListByProvinceCode/'+object.val()+'.json',
					dataType :'json',
					success : function(result) {
						$.each(result.cityList, function(entryIndex, entry) {
							var html = "<option value='" + entry["citycode"] + "'>"
									+ entry["cityname"] + "</option>";
							$("#selcity").append(html);
						});
					}
				});
			}
		}

		function getArea() {
			/* if (document.getElementById("areadiv").style.display == "block") {
				document.getElementById("areadiv").style.display = "none";
			}
			if (document.getElementById("areadiv").style.display == "none"
					&& document.getElementById("selcity").value != 0) {
				document.getElementById("areadiv").style.display = "block";
			} */
			$("#selarea option[value!=0]").remove();
			var object = $("#selcity");
			if (object.val() != 0) {
				$.ajax( {
					type :'post',
					url :'site/queryAllAreaListByCityCode/'+object.val()+'.json',
					dataType :'json',
					success : function(result) {
						$.each(result.areaList, function(entryIndex, entry) {
							var html = "<option value='" + entry["areacode"] + "'>"
									+ entry["areaname"] + "</option>";
							$("#selarea").append(html);
						});
					}
				});
			}
		}
</script>
	</head>
<body>
	<form action="<%=basePath%>/organ/saveOrgan.do" name="organForm" id="organForm" method="post" enctype="multipart/form-data">
		<input type="hidden" name="currentselectorganid" id="currentselectorganid" value="${pageData.currentselectorganid }"/>
		<div id="centerOfMainFrame">
			<table>
				<tr>
					<td>上级机构：<input type="text" width="300px" name="parentorganname" id="parentorganname" maxlength="32" value="${pageData.parentorganname }" title="上级机构名称" readonly="readonly"/></td>
				</tr>
				<tr>
					<td>机构名称：<input type="text" name="organname" id="organname" maxlength="32" placeholder="这里输入机构名称" value="" title="机构名称"/></td>
				</tr>
				<tr>
					<td>机构简称：<input type="text" name="abbrname" id="abbrname"  maxlength="32" placeholder="这里输入机构简称" value="" title="机构简称"/></td>
				</tr>
				<tr>
					<td>机构类型：
						<!-- <select name="organTypeId" title="机构类型" style="width:100px; font-size:12px;">
							<option value="1" selected>清吧</option>
							<option value="2">闹吧</option>
							<option value="3">慢摇吧</option>
						</select> -->
						<form:select path="dictionary.dicvalue" items="${dictionaryList}" itemLabel="diccode" itemValue="dicvalue" title="机构类型" style="width:100px; font-size:12px;"/>
					</td>
				</tr>
				<tr>
					<td>
						<div>
						机构地址：
							<select id="selprovince" name="provincecode" style="width:100px; font-size:12px;" onchange="getCity()">
								<option value="0">-请选择省份-</option>
							</select>
							<select id="selcity" name="citycode" style="width:100px; font-size:12px;" onchange="getArea()">
								<option value="0">-请选择城市-</option>
							</select>
							<select id="selarea" name="areacode" style="width:100px; font-size:12px;">
								<option value="0">-请选择地区-</option>
							</select>
							<!-- <span style="display: block;">
								<select id="selprovince" style="width:100px; font-size:12px;" onchange="getCity()">
									<option value="0">-请选择省份-</option>
								</select>
							</span>
							<span id="citydiv" style="display: none;">
								<select id="selcity" style="width:100px; font-size:12px;" onchange="getArea()">
									<option value="0">-请选择城市-</option>
								</select>
							</span>
							<span id="areadiv" style="display: none;">
								<select id="selarea" style="width:100px; font-size:12px;">
									<option value="0">-请选择地区-</option>
								</select>
							</span> -->
						</div>
					</td>
				</tr>
				<tr>
					<td><input type="text" name="address" id="address"  maxlength="32" placeholder="这里输入详细地址" title="机构地址" style="margin-left: 68px;"/></td>
				</tr>
				<tr>
					<td>商户LOGO：<input type="file" id="organlogo" name="organlogo"/></td>
				</tr>	
				<tr>
					<td>商户平面图：<input type="file" id="organplane" name="organplane"/></td>
				</tr>	
				<tr>
					<td>商户背景图：<input type="file" id="organfrontcover" name="organfrontcover"/></td>
				</tr>	
				<tr>
					<td>邮箱地址：<input type="email" name="email" id="email"  maxlength="32" placeholder="这里输入邮箱" title="邮箱" value="" /></td>
				</tr>			
				<tr>
					<td>联系电话：<input type="text" name="phonenumber" id="phonenumber"  maxlength="32" placeholder="这里输入联系电话" value="" title="联系电话"/></td>
				</tr>
				<tr>
					<td>机构状态：
						<select name="status" title="状态">
							<option value="1" selected>正常</option>
							<option value="0">冻结</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>机构描述：<textarea name="introduction" id="introduction" cols="100" rows="10" placeholder="这里输入机构描述" title="机构描述"></textarea></td>
				</tr>
				<tr>
					<td style="text-align: center;">
						<a class="btn btn-mini btn-primary" onclick="save();">保存</a>
						<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
					</td>
				</tr>
			</table>
		</div>
		<input type="hidden" name="token" value="${token}" />
		<div id="centerOfMainFrame2" class="center" style="display:none"><br/><br/><br/><br/><img src="static/images/jiazai.gif" /><br/><h4 class="lighter block green"></h4></div>
	</form>
	
	<!-- 引入 -->
	<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/js/ace-elements.min.js"></script>
	<script type="text/javascript" src="static/js/ace.min.js"></script>
	<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 下拉框 -->
	<script type="text/javascript">
		//上传
		$('#organlogo').ace_file_input({
			no_file:'请选择图片 ...',
			btn_choose:'选择',
			btn_change:'更改',
			droppable:false,
			onchange:null,
			thumbnail:false //| true | large
			//whitelist:'gif|png|jpg|jpeg'
			//blacklist:'exe|php'
			//onchange:''
			//
		});
		
		//上传
		$('#organplane').ace_file_input({
			no_file:'请选择图片 ...',
			btn_choose:'选择',
			btn_change:'更改',
			droppable:false,
			onchange:null,
			thumbnail:false //| true | large
			//whitelist:'gif|png|jpg|jpeg'
			//blacklist:'exe|php'
			//onchange:''
			//
		});
		
		//上传
		$('#organfrontcover').ace_file_input({
			no_file:'请选择图片 ...',
			btn_choose:'选择',
			btn_change:'更改',
			droppable:false,
			onchange:null,
			thumbnail:false //| true | large
			//whitelist:'gif|png|jpg|jpeg'
			//blacklist:'exe|php'
			//onchange:''
			//
		});
		</script>
</body>
</html>